<template>
  <div class="echarts-outer-wrapper width-620">
    <Title title="全市查补税额（分类型）" dw="单位：万元"></Title>
    <div class="echart-wrapper">
      <echartCompt class="echart" v-model="chartOption"></echartCompt>
    </div>
  </div>
</template>
  
  <script>
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";

export default {
  name: "qscbseflx",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: {
        skje: 0,
        znjje: 0,
        fkje: 0,
      },
    };
  },
  computed: {
    chartOption() {
      let option = {
        title: {
          show: true,
          top: "60",
          left: "40",
          textAlign: "center",
          textStyle: {
            fontSize: "14",
            color: "#b3d3e5",
          },
        },
        color: ["#0263FF", "#F0AF2D", "#FF3060", "#BF16F7"],
        legend: echartOption.echartLegend(),
        grid: {
          left: 0,
          // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        grid: {
          bottom: 150,
          left: 100,
          right: "10%",
        },
        series: [
          // 主要展示层的
          {
            radius: ["30%", "55%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              show: true,
              color: "#ffffff",
              textStyle: { fontSize: "16" },
              formatter: function (val) {
                //让series 中的文字进行换行
                return [
                  "{center|" +
                    val.name +
                    " " +
                    "}{money|" +
                    val.value +
                    "" +
                    "}",
                  "{center|" + val.percent + "%" + "}",
                ].join("\n");
              },
              rich: {
                money: {
                  color: "#fbe671",
                  padding: [0, 0, 10, 0],
                  align: "center",
                  fontSize: "16",
                },
                center: {
                  color: "#ffffff",
                  padding: [0, 0, 10, 0],
                  align: "center",
                  fontSize: "17",
                },
              },
            }, //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
            labelLine: {
              show: true,
              normal: {
                lineStyle: {
                  color: "#ffffff",
                },
              },
            }, //线条颜色
            data: [
              { name: "税款", value: this.EchartData.skje },
              { name: "滞纳金", value: this.EchartData.znjje },
              { name: "罚款", value: this.EchartData.fkje },
            ],
          },
        ],
      };
      return option;
    },
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsJccxService/qscbseflxQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      // this.initEchart();
    });
  },
  methods: {},
};
</script>
  
  <style scoped lang="scss">
.echarts-outer-wrapper {
  width: 536px;
  height: 476px;
  position: relative;
}
.echart-wrapper {
  height: 416px;
  .echart {
    height: 100%;
  }
}
</style>
  